<template>
<h1>El-布局组件</h1>
<<el-row :gutter="20">
 <el-col :span="6" >哈哈哈</el-col>
 <el-col :span="6">哈哈哈</el-col>
 <el-col :span="6">哈哈哈</el-col>
 <el-col :span="6">哈哈哈</el-col>
</el-row>
  <el-row :gutter="10">
   <el-col :span="12"><img src="rich.jpg" style="width: 100%"></el-col>
   <el-col :span="12"><img src="rich.jpg" style="width: 100%"></el-col>
  </el-row>
  <el-row :gutter="10">
   <el-col :span="4"><img src="mwzz.png" style="width: 100%"></el-col>
   <el-col :span="4"><img src="mwzz.png" style="width: 100%"></el-col>
   <el-col :span="4"><img src="mwzz.png" style="width: 100%"></el-col>
   <el-col :span="4"><img src="mwzz.png" style="width: 100%"></el-col>
   <el-col :span="4"><img src="mwzz.png" style="width: 100%"></el-col>
   <el-col :span="4"><img src="mwzz.png" style="width: 100%"></el-col>
  </el-row>
  <h3>列偏移</h3>
  <el-row :gutter="10">
   <el-col :offset="4" :span="20"><img src="rich.jpg" style="width: 100%"></el-col>
  </el-row>
  <el-row :gutter="10">
   <el-col :offset="6" :span="12"><img src="2024.png" style="width: 100%"></el-col>
  </el-row>
  <el-row :gutter="10">
   <el-col :span="4"><img src="2024.png" style="width: 100%"></el-col>
   <el-col :span="8"><img src="2024.png" style="width: 100%"></el-col>
   <el-col :span="12"><img src="2024.png" style="width: 100%"></el-col>
  </el-row>
  <el-row :gutter="10">
   <el-col :span="3" v-for="item in 8" style="border: 3px solid red">{{item}}</el-col>
  </el-row>
  <br>
  <el-row :gutter="10">
   <el-col :span="12" style="border: 3px solid red">12</el-col>
   <el-col :span="12" style="border: 3px solid green">
     <el-row :gutter="10">
      <el-col :span="8" style="border: 3px solid blue">8</el-col>
      <el-col :span="8" style="border: 3px solid blue">8</el-col>
      <el-col :span="8" style="border: 3px solid blue">8</el-col>
     </el-row>
   </el-col>
  </el-row>
</template>

<script setup>

</script>

<style scoped>

</style>